import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入组件库
import ElementPlus from 'element-plus'
// 引入组件库样式
import 'element-plus/dist/index.css'
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 引入icon图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
// 全局注册组件库-- 中文
app.use(ElementPlus, {
    locale: zhCn,
})
// 全局注册icon图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

// 自定义指令
// input自动聚焦
app.directive('focus', {
    /* ... */
    mounted: (el) => el.focus()
})
// 阻止button按钮暴力点击
app.directive('preventClick', {
    beforeMount: (el) => {
        el.addEventListener('click', () => {
            el.disabled = true
            setTimeout(() => {
                el.disabled = false
            }, 2000)
        })
    }
})

app.use(store).use(router).mount('#app')

// 解决浏览器宽度发生变化时报错
window.ResizeObserver = class _NewResizeObserver extends ResizeObserver {
    constructor(callback) {
        super(() => window.requestAnimationFrame(() => callback.apply(this, arguments)));
    }
}
